<%@page import="com.canin.model.Member"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<div id="rightPan">
	<div id="rightbodyPan">

		<div id="headerTab" style="height: 55px;">
			<a style="width: 90px;" href="<s:url action="member_edit"/>">ข้อมูลส่วนตัว</a>
			<a style="width: 60px;" href="<s:url action="dog_toAdd"/>">เพิ่มสุนัข</a>
			<a style="width: 200px;" href="<s:url action="dog_toEdit"/>">ปรับปรุงข้อมูลสุนัขให้เป็นปัจจุบัน</a>
			<a style="width: 200px; margin-top: 5px;" id="clicked">สั่งซื้ออาหารสำหรับสุนัขของฉัน</a>
			<a style="width: 210px; margin-top: 5px;"
				href="<s:url action="sugg_tool"/>">สั่งซื้ออุปกรณ์สำหรับสุนัขของฉัน</a>
		</div>

		<script type="text/javascript">
			var idealWeightFlag = true;
			var rowId;

			function onDogNameChange(value) {
				document.getElementById('sugg_dog').submit();
			}

			function calc() {
				document.getElementById('sugg_calc').submit();
			}

			function search() {
				document.getElementById('sugg_search').submit();
				//document.getElementById( "idealW" ).checked=true;
			}

			function onDietFlag(value) {
				document.getElementById("idealW").checked = (document.getElementById("dietFlag").checked);
			}
			
			function onGainFlag(value){
				document.getElementById("idealW").disabled = (document.getElementById("gainWeightFlag").checked);
			}

			function orderFood() {
				document.getElementById('sugg_orderFood').submit();
			}

			function fx(value) {
				console.log(value);
			}
		</script>

		<s:form id="sugg_dog" action="sugg_dog" theme="simple">
			<table>
				<tr>
					<td id="slabel" style="padding-top: 30px;">สั่งซื้ออาหารสำหรับ:</td>
					<td style="padding-top: 30px;"><s:select list="dogNameList"
							key="suggForm.dogNameList" headerKey="-1" headerValue=""
							onchange="onDogNameChange(this.value)" /></td>
				</tr>
			</table>
		</s:form>

		<s:form id="sugg_calc" action="sugg_calc" theme="simple">
			<s:if test="suggForm.showLastUpdated">
				<p style="padding-top: 10px;" id="sugg">
					<s:label name="suggForm.dateCount" />
					<a style="width: 200px;" href="<s:url action="dog_toEdit"/>">ปรับปรุงข้อมูล</a>
				</p>

				<input onclick="calc()" type="button" value="แสดงข้อมูล" id="button"
					style="margin: 5px 0 0 250px; width: 100px;"></input>
				<hr />
			</s:if>
		</s:form>

		<s:form id="sugg_search" action="sugg_search" theme="simple">
			<s:if test="suggForm.showDetail">
				<p id="sugg">
					<s:label name="suggForm.dogName" />
					&nbsp;&nbsp;&nbsp;&nbsp;อายุ&nbsp;
					<s:label name="suggForm.ageDisplay" />
				</p>
				<p id="sugg">
					น้ำหนัก&nbsp;&nbsp;
					<s:label name="suggForm.weight" />
					&nbsp;&nbsp;กิโลกรัม
				</p>
				<p id="sugg">
					เป็นสุนัข&nbsp;&nbsp;
					<s:label name="suggForm.lifeSpan" />
					&nbsp;&nbsp; ขนาด
					<s:label name="suggForm.breedSize" />
					&nbsp;&nbsp; พันธุ์
					<s:label name="suggForm.breedName" />
				</p>

				<s:if test="suggForm.showDiet">
					<hr />
					<p id="sugg" style="padding-top: 5px;">
						น้ำหนัก
						<s:if test="suggForm.calcWeight==0">ตาม</s:if>
						<s:if test="suggForm.calcWeight==1">น้อยกว่า</s:if>
						<s:if test="suggForm.calcWeight==2">เกินกว่า</s:if>
						มาตรฐาน&nbsp;&nbsp;
						<s:label name="suggForm.percentWeight" />
					</p>

					<s:if test="suggForm.calcWeight==1">
						<p id="sugg">
							<s:checkbox key="suggForm.gainWeightFlag" id="gainWeightFlag"
							 onchange="onGainFlag(this.value);"/>
							ต้องการเพิ่มน้ำหนัก
						</p>
					</s:if>
					<s:if test="suggForm.calcWeight==2">
						<p id="sugg">
							<s:checkbox key="suggForm.dietFlag" id="dietFlag"
								onchange="onDietFlag(this.value);"/>
							ต้องการลดน้ำหนัก
						</p>
						<p id="sugg">
							น้ำหนักที่ต้องการ&nbsp;&nbsp;<s:textfield key="suggForm.idealWeight" size="10"/>
							&nbsp;&nbsp;กิโลกรัม
						</p>
					</s:if>

					<s:if test="suggForm.calcWeight==1 || suggForm.calcWeight==2">
						<p id="info">
							สุนัขพันธุ์
							<s:label name="suggForm.breedName" />
							&nbsp;&nbsp;วัยโตเต็มวัย มีน้ำหนักมาตรฐาน&nbsp;&nbsp;<s:label name="suggForm.standardWeight"/>&nbsp;&nbsp;กิโลกรัม
						</p>
						<p id="warning">สุนัขที่มีน้ำหนักมากกว่าปกติ 15-20%
							จะมีความเสี่ยงต่อการเจ็บป่วยต่างๆ เช่น โรคหัวใจ โรคเบาหวาน โรคผิวหนัง การหายใจลำบาก และปัญหาต่างๆของข้อต่อ</p>
					</s:if>
					<hr />
				</s:if>

				<p id="sugg"><strong>ประเภทอาหาร</strong></p>
				<table>
					<tr><td>&nbsp;</td><td><s:checkbox key="suggForm.dryFoodType"/>อาหารแห้ง</td></tr>
					<tr><td>&nbsp;</td><td><s:checkbox key="suggForm.wetFoodType"/>อาหารเปียก</td></tr>
				</table>

				<p id="sugg"><strong>ความต้องการพิเศษ(สูตร)</strong></p>
				<table>
					<tr><td>&nbsp;</td><td><s:checkbox key="suggForm.idealWeightFoodNT" id="idealW"/>ควบคุมน้ำหนัก</td></tr>
					<tr><td>&nbsp;</td><td><s:checkbox key="suggForm.jointBoneFoodNT"/>บำรุงข้อต่อและกระดูก</td></tr>
					<tr><td>&nbsp;</td><td><s:checkbox key="suggForm.allergyFoodNT"/>สำหรับผิวแพ้ง่าย</td></tr>
					<tr><td>&nbsp;</td><td><s:checkbox key="suggForm.attractFoodNT"/>มีความน่ากินสูง</td></tr>
					<tr><td>&nbsp;</td><td><s:checkbox key="suggForm.urinaryFoodNT"/>เพื่อสุขภาพที่ดีของระบบทางเดินปัสสาวะ</td></tr>
					<tr><td>&nbsp;</td><td><s:checkbox key="suggForm.dentalFoodNT"/>ลดการก่อหินปูนที่ฟัน</td></tr>
					<tr><td>&nbsp;</td><td><s:checkbox key="suggForm.digestiveFoodNT"/>โปรตีนมีคุณภาพ ย่อยและดูดซึมง่าย</td></tr>
					<tr><td>&nbsp;</td><td><s:checkbox key="suggForm.skinCoatFoodNT"/>เพื่อผิวหนังและขนสวยเงางาม</td></tr>
					<tr><td>&nbsp;</td><td><s:checkbox key="suggForm.muscleFoodNT"/>เสริมสร้างกล้ามเนื้อ</td></tr>
				</table>

				<p id="sugg" style="padding-top: 5px;">
					งบประมาณ&nbsp;&nbsp;<s:textfield key="suggForm.budget" size="10" />&nbsp;&nbsp;บาท
				</p>
				<p id="sugg" style="padding-top: 2px;">
					ระยะเวลาที่ต้องการให้อาหารนั้น มีปริมาณเพียงพอกับความต้องการของสุนัข&nbsp;&nbsp;
					<s:textfield key="suggForm.periodDay" size="10"/>&nbsp;&nbsp;วัน
				</p>

				<input onclick="search()" type="button" value="ค้นหาผลิตภัณฑ์อาหารที่เหมาะสม" id="button"
					style="margin: 10px 0 0 180px; width: 230px;"></input>
				<hr/>
			</s:if>
		</s:form>

		<s:if test="desireFoodList!=null">
		
			<style type="text/css">
			  #selectable .ui-selecting { background: #FECA40; }
			  #selectable .ui-selected { background: #F39814; color: white; }
			  #selectable { list-style-type: none; margin: 0; padding: 0; }
			  #selectable li { margin: 3px; padding: 1px; float: left; width: 200px; height: 150px; text-align: center; }
			</style>
			
			<s:form action="sugg_orderFood" id="sugg_orderFood" theme="simple">
				<script type="text/javascript">
					$(function() {
						$('#selectable').selectable();
					});
					
					function showFoodDetail(index)
					{
						var amount = $('#input_' + index).val();
						$('#content').html('');
						
						$.ajax({
							type: 'POST',
							dataType: 'html',
						  	url: 'sugg_foodDetail.action',
						  	data: { foodDetailIndex: index, foodDetailAmount: amount},
						  	cache: false,
						  	beforeSend: function() {  
						  		$('#loading_div').show();
							  	$('#foodDetail').dialog({
									modal : true,
									position : 'top'
							  	});
						  	},
						  	success: function(data) {
								$('#content').append(data);
								$('#ui-dialog-title-foodDetail').html('รายละเอียดของ');
								$('#loading_div').hide();
								$('#foodDetail').dialog({
									modal : true,
									hide : 'drop',
									width: 700,
									position : 'top'
								});
						  	}
						});

					}
				</script>
				<div>
					<ol id="selectable">
						<s:iterator value="desireFoodList" status="foodStatus">
							<li>
								<table width="100%" border="1" style="border-width:0.5px;"
									cellpadding="0" cellspacing="0">
									<tr style="font-size:14px; color:black; padding-left: 0px;">
										<td colspan="2"><s:property value="foodName"/></td>
									</tr>
									<tr>
										<td colspan="2">
											<table>
												<tr style="font-size:12px; color:#993300; padding-left: 0px;">
													<td><s:if test="%{breedFlag}"><img src="../images/check.png" width="15px" height="15px"/></s:if>
														<s:else><img src="../images/uncheck.png"  width="15px" height="15px"/></s:else>พันธุ์</td>
													<td><s:if test="%{ageFlag}"><img src="../images/check.png"  width="15px" height="15px"/></s:if>
														<s:else><img src="../images/uncheck.png"  width="15px" height="15px"/></s:else>วัย</td>
													<td><s:if test="%{sizeFlag}"><img src="../images/check.png"  width="15px" height="15px"/></s:if>
														<s:else><img src="../images/uncheck.png"  width="15px" height="15px"/></s:else>ขนาด</td>
													<td><s:if test="%{ftnFlag}"><img src="../images/check.png"  width="15px" height="15px"/></s:if>
														<s:else><img src="../images/uncheck.png"  width="15px" height="15px"/></s:else>สูตร</td>
													<td><s:if test="%{typeFlag}"><img src="../images/check.png"  width="15px" height="15px"/></s:if>
														<s:else><img src="../images/uncheck.png"  width="15px" height="15px"/></s:else>ประเภท</td>
												</tr>
											</table>
										</td>
									</tr>
									
									<tr style="font-size:12px; color:black; padding-left: 0px;">
										<td><s:property value="sizeKg"/>&nbsp;กิโลกรัม</td>
										<td><s:property value="currencyPrice"/>&nbsp;บาท</td>
									</tr>
									
									<tr>
										<td style="font-size:12px; color:black; padding-left: 0px;">สั่งซื้อ
										<s:textfield size="2" maxlength="2" id="input_%{#foodStatus.index}" style=" text-align:right; "
										name="desireFoodList[%{#foodStatus.index}].amount"/>ถุง</td>
										<td><span style="cursor:pointer; color:blue; font-size:12px;" 
										onclick="showFoodDetail( <s:property value="%{#foodStatus.index}"/> )">รายละเอียด...</span></td>
									</tr>
								</table>
							</li>
						</s:iterator>
					</ol>
				</div>
				
				<input onclick="orderFood()" type="button" value="สั่งซื้อ"
				id="button" style="margin: 10px 0 0 250px; width: 90px; clear:both"></input>
					
				<hr/>
				<div style="height: 50px;"></div>
			</s:form>
			<div id="foodDetail" title="Loading..." align="center">
				<div id="loading_div" style="display:none;">
					<img src="../images/red-loading.gif"/>
				</div>
				<div id="content" align="left"></div>
			</div>
		</s:if>
		
	</div>
</div>

